<template>
  <div class="page-operation">
    <el-button type="primary" @click="handleInsertCategory">Insert Category</el-button>
  </div>
  <div class="page-filter">
    <el-form inline @submit.pervent="handleSearch" :disabled="isLoadingCategoryList">
      <el-form-item label="Status">
        <el-select v-model="categoryListParams.is_show" placeholder="Please select">
          <el-option value label="All"></el-option>
          <el-option value="1" label="Active"></el-option>
          <el-option value="0" label="Inactive"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Name">
        <el-input v-model="categoryListParams.cate_name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">Search</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="page-container" v-loading="isLoadingCategoryList">
    <el-table border row-key="id" :data="categoryList" :tree-props="{ children: 'children' }">
      <el-table-column prop="id" label="ID" width="100"></el-table-column>
      <el-table-column prop="cate_name" label="Name"></el-table-column>
      <el-table-column prop="add_time" label="Created At"></el-table-column>

      <el-table-column prop="is_show" label="Status" width="120">
        <template #default="{ row }">
          <el-switch
            v-model="row.is_show"
            :active-value="1"
            :inactive-value="0"
            :loading="row.loading"
            @change="handleChangeStatus(row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="Action" width="120" fixed="right">
        <template #default="{ row }">
          <el-link type="primary" @click="handleEdit(row)">Edit</el-link>
          <el-divider direction="vertical"></el-divider>
          <el-popconfirm
            title="It cannot be restored after deletion. Are you sure you want to delete it ?"
            @confirm="handleDelete(row)"
          >
            <template #reference>
              <el-link type="danger">Delete</el-link>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <EditCategory
    v-model="editVisible"
    v-model:category-info="categoryInfo"
    :category-list="categoryList"
    @submit="handleGetCategoryList"
  />
</template>
<script setup lang="ts">
import {
  deleteCategory,
  setCategoryStatus,
} from '@/api/category'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import EditCategory from './edit.vue'
import useCategoryList from './index'

// 1. get category list
const {
  isLoadingCategoryList,
  handleGetCategoryList,
  categoryListParams,
  categoryList,
} = useCategoryList()

handleGetCategoryList()

function handleSearch() {
  handleGetCategoryList()
}

// 2. insert category
const editVisible = ref<boolean>(false)
function handleInsertCategory() {
  editVisible.value = true
}

const categoryInfo = ref<CategoryInfoType | null>(null)

function handleEdit(row: CategoryInfoType) {
  categoryInfo.value = row
  editVisible.value = true
}

function handleDelete(row: CategoryInfoType) {
  deleteCategory(row.id).then(() => {
    handleGetCategoryList()
    ElMessage.success('Delete Success')
  })
}

//
function handleChangeStatus(row: CategoryInfoType) {
  row.loading = true
  setCategoryStatus(row.id, row.is_show).finally(() => {
    handleGetCategoryList()
  })
}
</script>
